<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" th:href="@{/assets/img/favicon.png}">

    <title>QuillPro - Bootstrap 4 Dashboard Template</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&amp;subset=latin-ext"
          rel="stylesheet">

    <!-- CSS - REQUIRED - START -->
    <!-- Batch Icons -->
    <link rel="stylesheet" th:href="@{/assets/fonts/batch-icons/css/batch-icons.css}">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap/bootstrap.min.css}">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap/mdb.min.css}">
    <!-- Custom Scrollbar -->
    <link rel="stylesheet" th:href="@{/assets/plugins/custom-scrollbar/jquery.mCustomScrollbar.min.css}">
    <!-- Hamburger Menu -->
    <link rel="stylesheet" th:href="@{/assets/css/hamburgers/hamburgers.css}">

    <!-- CSS - REQUIRED - END -->

    <!-- CSS - OPTIONAL - START -->
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/assets/fonts/font-awesome/css/font-awesome.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/assets/fonts/font-awesome/css/font-awesome.min.css}">
    <!-- JVMaps -->
    <link rel="stylesheet" th:href="@{/assets/plugins/jvmaps/jqvmap.min.css}">
    <!-- CSS - OPTIONAL - END -->

    <!-- QuillPro Styles -->
    <link rel="stylesheet" th:href="@{/assets/css/quillpro/quillpro.css}">
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="right-column">
            <main class="main-content p-5" role="main" id="principal">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-xl-12 mb-5">
                        <div class="card">
                            <div class="card-header">
                                <form th:action="@{/add}" method="post">
                                    Todo List:
                                    <input type="text" name="title" id="title">
                                    <input type="text" name="level" id="level">
                                    <input type="submit">
                                </form>
                                <div class="header-btn-block">
                                    <a href="task-manager.html" class="btn btn-primary">
                                        <i class="batch-icon batch-icon-add"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-xl-12 mb-5">
                        <div class="card card-task card-md">
                            <div class="card-header">
                                Todo List
                                <p class="task-list-stats">
                                    <span class="task-list-completed">0</span> of <span class="task-list-total">0</span>
                                    tasks completed
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-sm bg-gradient" role="progressbar"
                                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                         style="width: 0%"></div>
                                </div>
                                <div class="header-btn-block">
                                    <a href="task-manager.html" class="btn btn-primary">
                                        <i class="batch-icon batch-icon-add"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-task-list">
                                <ul class="task-list">
                                    <li class="task-list-item" th:each="todoList:${todoLists}">
                                        <div th:class="${todoList.getIs_done()}==1?'custom-control custom-checkbox active':'custom-control custom-checkbox'">
                                            <input type="checkbox" class="custom-control-input" th:checked="${todoList.getIs_done()}">
                                            <label class="custom-control-label" th:switch="${todoList.getLevel()}">
                                                <span th:case="0"></span>
                                                <span th:case="1" class="badge badge-primary">Optional</span>
                                                <span th:case="2" class="badge badge-warning">High Priority</span>
                                                <span th:case="3" class="badge badge-danger">Critical</span>
                                                <span th:text="${todoList.getTitle()}"></span>
                                            </label>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <div class="col-md-12">
                        <footer>
                            Powered by - <a href="http://base5builder.com/?click_source=quillpro_footer_link"
                                            target="_blank"
                                            style="font-weight:300;color:#ffffff;background:#1d1d1d;padding:0 3px;">Base<span
                                style="color:#ffa733;font-weight:bold">5</span>Builder</a>
                        </footer>
                    </div>
                </div>
            </main>
        </div>
    </div>
</div>

<!-- SCRIPTS - REQUIRED START -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Bootstrap core JavaScript -->
<!-- JQuery -->
<script type="text/javascript" th:src="@{/assets/js/jquery/jquery-3.1.1.min.js}"></script>
<!-- Popper.js - Bootstrap tooltips -->
<script type="text/javascript" th:src="@{/assets/js/bootstrap/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="@{/assets/js/bootstrap/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="@{/assets/js/bootstrap/mdb.min.js}"></script>
<!-- Velocity -->
<script type="text/javascript" th:src="@{/assets/plugins/velocity/velocity.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/plugins/velocity/velocity.ui.min.js}"></script>
<!-- Custom Scrollbar -->
<script type="text/javascript" th:src="@{/assets/plugins/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<!-- jQuery Visible -->
<script type="text/javascript" th:src="@{/assets/plugins/jquery_visible/jquery.visible.min.js}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript" th:src="@{/assets/js/misc/ie10-viewport-bug-workaround.js}"></script>

<!-- SCRIPTS - REQUIRED END -->

<!-- SCRIPTS - OPTIONAL START -->
<!-- ChartJS -->
<script type="text/javascript" th:src="@{/assets/plugins/chartjs/chart.bundle.min.js}"></script>
<!-- JVMaps -->
<script type="text/javascript" th:src="@{/assets/plugins/jvmaps/jquery.vmap.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/plugins/jvmaps/maps/jquery.vmap.usa.js}"></script>
<!-- Image Placeholder -->
<script type="text/javascript" th:src="@{/assets/js/misc/holder.min.js}"></script>
<!-- SCRIPTS - OPTIONAL END -->

<!-- QuillPro Scripts -->
<script type="text/javascript" th:src="@{/assets/js/scripts.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/i7system.js}"></script>
</body>
</html>
